<?php

use yuankezhan\yiiPageWidget\PageWidget;
use yuankezhan\yiiTableWidget\Column;
use yuankezhan\yiiTableWidget\SelectFuncReturn;
use yuankezhan\yiiTableWidget\TableSelectAttribute;
use yuankezhan\yiiTableWidget\TableToolCommand;

/**
 * @var TableSelectAttribute $tableSelectAttribute 全选对应的配置
 */
/**
 * @var TableToolCommand[] $toolCommandArr 全选对应的配置
 */
?>
<style>
    .public-table-body{
        position: relative;
        overflow-x: auto;
        margin-bottom: -1px;
        margin-right: -1px;
        margin: 10px 0;
        min-height: 200px;
    }
    .public-table-body *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .public-table-body *::-webkit-scrollbar-button {
        display: none;
    }
    .public-table-body *::-webkit-scrollbar-thumb {
        background-color: #999;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .public-table-body *::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
    .public-table th, .public-table td, .public-table-view, .public-table-tool, .public-table-header, .public-table-col-set, .public-table-total, .public-table-page, .public-table-fixed-r, .public-table-tips-main, .public-table-grid-down {
        border-width: 1px;
        border-style: solid;
        border-color: #eee;
    }
    .public-table thead tr, .public-table-header, .public-table-tool, .public-table-total, .public-table-total tr, .public-table-patch, .public-table-mend, .public-table tbody tr:hover, .public-table-hover, .public-table-click {
        background-color: #FAFAFA;
    }
    .public-table{
        width: 100%;
        margin: 0;
        background-color: #fff;
        color: #666;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .public-table-header{
        border-width: 0;
        border-bottom-width: 1px;
        overflow: hidden;
    }

    .public-table tr {
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .public-table th, .public-table td {
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .public-table-btn {
        display: inline-block;
        vertical-align: middle;
        border: 1px solid transparent;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        margin-right: 10px;
        margin-bottom: 1px;
    }
    .public-table-btn:hover
    {
        opacity: .8;
    }

    .public-table-btn, .public-table-input, .public-table-textarea, .public-table-upload-button, .public-table-select {
        outline: none;
        -webkit-appearance: none;
        transition: all .3s;
        -webkit-transition: all .3s;
        box-sizing: border-box;
    }
    .public-table-btn-warm {
        background-color: #FFB800;
    }
    .public-table-btn-danger {
        background-color: #FF5722;
    }
    .public-table-btn-disabled {
        border-color: #eee!important;
        background-color: #FBFBFB!important;
        color: #d2d2d2!important;
        cursor: not-allowed!important;
        opacity: 1;
    }
    .public-table-btn-xs {
        padding: 1px 4px;
        font-size: 12px;
    }
    .public-table-btn:link,.public-table-btn:visited,.public-table-btn:active,.public-table-btn:hover {
        color: white;
    }

    .public-table-icon{

        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 13px;
        width: 13px;
        height: 13px;
    }

    .public-table-btn-group-name {
        display: inline-block;
        background: #009688;
        color: #fff;
        padding: 1px 4px;
        border-radius: 2px;
        margin-bottom: 1px;
        width: auto;
    }

    .public-table-btn-group {
        display: inline-block;
        margin-right: 10px;
    }

    .public-table-btn-group span{
        font-size: 12px;
    }

    /*.public-table-btn-group-name:after {*/
    /*    padding-top: 2px;*/
    /*    content: url('data:image/svg+xml;utf8,<svg t="1711519333966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="923" width="13" height="13"><path d="M54.4 348.8l428.8 416c9.6 6.4 19.2 9.6 28.8 9.6 9.6 0 22.4-3.2 28.8-9.6l428.8-416c16-12.8 16-35.2 0-48s-41.6-12.8-54.4 0L512 688 108.8 300.8c-12.8-16-38.4-16-54.4 0-16 12.8-16 35.2 0 48z" fill="white" p-id="924"></path></svg>');*/
    /*}*/
    .public-table-btn-group-content
    {
        display: block;
        position: relative;
    }
    .public-table-btn-group-content-box{
        position: absolute;
        left: 0px;
        z-index: 1000;
        background-color: white;
        padding: 1px;
        border: 1px solid #efefef;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.2);
    }
    .public-table-body .hidden{
        display: none;
    }
    .public-table-btn-group-content-box .public-table-btn {
        margin: 0 0 2px 0;
        border-radius: unset;
    }
    .public-table-btn-group-content-box .public-table-btn:last-child
    {
        margin: 0;
    }

    .public-table-tool {
        position: relative;
        z-index: 890;
        width: 100%;
        min-height: 54px;
        line-height: 30px;
        padding: 10px 15px;
        border-width: 0;
        border-bottom-width: 1px;
        display: flex;
        background: #FAFAFA;
        border:1px solid #eee;
        border-bottom-width: 0px;
        box-sizing: border-box
    }
    .public-table-tool-self {
        position: absolute;
        right: 6px;
        top: 10px;
    }

    .public-table-tool .public-inline{
        position: relative;
        width: 20px;
        height: 20px;
        padding: 2px;
        margin-right: 8px;
        text-align: center;
        color: #333;
        border: 1px solid #999;
        cursor: pointer;
        -webkit-transition: .5s all;
        transition: .5s all;
        border-radius: 2px;
        box-sizing: unset !important;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .public-table-tool-panel label, .public-table-tool-panel input
    {
        margin: 0 0 0 2px;
        padding: 0;
    }
    .public-table-tool .public-table-tool-self .public-table-tool-panel {
        left: auto;
        right: -1px;
    }

    .public-table-tool-panel {
        max-height: 250px;
        position: absolute;
        top: 30px;
        left: -1px;
        padding: 5px 3px;
        min-width: 150px;
        min-height: 40px;
        border: 1px solid #d2d2d2;
        text-align: left;
        overflow-y: auto;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
        border-radius: 4px;
    }

    .public-table-tool-panel li{
        display: flex;
        line-height: 26px;
    }

    .public-table-tool-command {
        display: flex;
    }
    .public-table-filter-box
    {
        width: 100%;
        height: 100%;
    }

    .public-table-tool-command svg, .public-table-tool-command img{
        fill: #333;
        max-width: 100% !important;
        max-height: 100% !important;
        vertical-align: unset !important;
    }
    .table-item-show {
        display: block !important;
    }
</style>
<script>
    // 全选开始
    function tableSelectAll(_this, key)
    {
        let checkboxes = document.querySelectorAll(`.checkAllItem_${key}:not(:disabled)`);
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = _this.checked;
            returnCheckedValueArr(_this, key);
        });
    }

    function tebleSelectItem(_this, key)
    {
        let checkboxes = document.querySelectorAll(`.checkAllItem_${key}:not(:disabled)`);
        // 检查所有子复选框是否都被选中
        let allChecked = Array.from(checkboxes).every(function(item) {
            return item.checked;
        });

        let selectAllCheckbox = document.querySelector(`.checkAllParent_${key}`);
        // 如果所有子复选框都被选中，则将全选复选框也选中；否则取消选中
        selectAllCheckbox.checked = allChecked;
        returnCheckedValueArr(_this, key);
    }

    // 获取全选复选框和所有子复选框
    function returnCheckedValueArr(_this, key)
    {
        <?php if (!empty($tableSelectAttribute->selectCallback)):?>
        let checkboxes = document.querySelectorAll(`.checkAllItem_${key}:not(:disabled)`);
        let selectedValues = [];
        // 将选中的复选框的值添加到数组中
        checkboxes.forEach(function(checkbox) {
            if (checkbox.checked) {
                selectedValues.push(checkbox.value);
            }
        });
        eval(<?=$tableSelectAttribute->selectCallback?>(selectedValues, _this));
        <?php endif;?>
    }

    // 全选结束



    // table显示过滤开始
    function filterBoxShow(_this)
    {
        let parent = _this.parentNode;
        let siblingDom = parent.querySelector('.public-table-tool-panel');
        if (siblingDom.classList.contains('hidden'))
        {
            siblingDom.classList.remove('hidden');
        }
        else
        {
            siblingDom.classList.add('hidden');
        }

    }

    function tableFilter(_this, _class)
    {
        let classList = document.getElementsByClassName(_class);
        if (_this.checked)
        {
            for (let i = 0; i < classList.length; i++)
            {
                classList[i].classList.remove('hidden');
            }
        }
        else
        {
            for (let i = 0; i < classList.length; i++)
            {
                classList[i].classList.add('hidden');
            }
        }
    }
    // table显示过滤结束

    //  table 顶部命令执行开始
    function tableCommandExecute(callbackType, callback)
    {
        // 在新标签页中打开链接
        if (callbackType == <?=TableToolCommand::CALLBACK_TYPE_TARGET_HREF?>)
        {
            window.open(callback, '_blank');
        }
        // 在新标签页中打开链接
        else if (callbackType == <?=TableToolCommand::CALLBACK_TYPE_HREF?>)
        {
            window.open(callback);
        }
        // 执行 js 函数
        else if (callbackType == <?=TableToolCommand::CALLBACK_TYPE_JS_FUNC?>)
        {
            eval(callback)()
        }
    }
    //  table 顶部命令执行结束

</script>

<?php if (!empty($data)):?>
    <div class="public-table-body public-table-main">
        <div class="public-table-tool">
            <?php if (!empty($toolCommandArr)):?>
                <div class="public-table-tool-command">
                    <?php foreach ($toolCommandArr as $command):?>
                        <?php foreach ($command->iconConfigArray as $iconKey => $icon):?>
                            <?php if ($command->type == $iconKey):?>
                                <div class="public-inline public-command-icon" title="<?=$command->title?>" onclick="tableCommandExecute(<?=$command->callbackType?>, '<?=$command->callback?>')">
                                    <?=$icon?>
                                </div>
                            <?php endif;?>
                        <?php endforeach;?>
                    <?php endforeach;?>
                </div>
            <?php endif;?>
            <div class="public-table-tool-self">
                <div class="public-inline">
                    <i class="public-table-filter-box" onclick="filterBoxShow(this)">
                        <svg t="1711591707579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6441" width="18" height="18"><path d="M102.88 162.15a58.52 58.52 0 0 1 58.63-58.63h263.14a58.5 58.5 0 0 1 58.57 58.63v263.14a58.52 58.52 0 0 1-58.57 58.57H161.51a58.5 58.5 0 0 1-58.63-58.57zM176 202.64v182.1a26 26 0 0 0 26 26h182.1a25.91 25.91 0 0 0 26-26v-182.1a25.91 25.91 0 0 0-26-26H202a25.91 25.91 0 0 0-26 26zM102.88 601a58.52 58.52 0 0 1 58.63-58.63h263.14A58.5 58.5 0 0 1 483.22 601v263.15a58.52 58.52 0 0 1-58.57 58.57H161.51a58.52 58.52 0 0 1-58.63-58.57z m503.22-29.37H887a35.11 35.11 0 1 1 0 70.22H606.1a35.11 35.11 0 0 1 0-70.22z m0 204.8H887a35.11 35.11 0 1 1 0 70.22H606.1a35.11 35.11 0 0 1 0-70.22z m0-614.4H887a35.11 35.11 0 1 1 0 70.22H606.1a35.11 35.11 0 0 1 0-70.22z m0 204.8H887a35.11 35.11 0 1 1 0 70.22H606.1a35.11 35.11 0 0 1 0-70.22zM176 823.6a26 26 0 0 0 26 26h182.1a25.91 25.91 0 0 0 26-26V641.5a25.91 25.91 0 0 0-26-26H202a25.91 25.91 0 0 0-26 26z m0 0" fill="#3C4551" p-id="6442"></path></svg>
                    </i>
                    <ul class="public-table-tool-panel hidden">
                        <?php foreach ($columns as $c) :?>
                            <?php $checkBoxId = md5($key . $c->title);?>
                            <li>
                                <input id="<?=$checkBoxId?>" type="checkbox"  <?php if (empty($defaultShowColumns) || in_array($c->title, $defaultShowColumns)){echo "checked";}?> onchange="tableFilter(this, '<?=$checkBoxId?>')">
                                <label for="<?=$checkBoxId?>" class="public-unselect"><span><?=$c->title?></span></label>
                            </li>
                        <?php endforeach;?>
                    </ul>
                </div>
            </div>
        </div>
        <table cellspacing="0" cellpadding="0" border="0" class="public-table">
            <?php if($showTitle):?>
                <thead class="public-table-header">
                <tr>
                    <?php if (isset($tableSelectAttribute)):?>
                        <th>
                            <input class="<?="checkAllParent_{$key}"?>" onclick="tableSelectAll(this, '<?=$key?>')" type="checkbox">
                        </th>
                    <?php endif;?>
                    <?php foreach ($columns as $c) :?>
                        <th class="<?= $c->class ?> <?=md5($key . $c->title)?> <?php if (!empty($defaultShowColumns) && !in_array($c->title, $defaultShowColumns)){echo "hidden";}?>" <?= $c->attributeStr ?>><?=$c->title?></th>
                    <?php endforeach;?>
                </tr>
                </thead>
            <?php endif;?>
            <tbody class="public-table-body public-table-main">
            <?php foreach ($data as $index => $dItem) :?>
                <tr data-index="<?= $index+1?>">
                    <!--多选逻辑 start -->
                    <?php if (isset($tableSelectAttribute)):?>
                        <td>
                            <?php
                            $canSelect = true;
                            $cantSelectMessage = "";
                            if (isset($tableSelectAttribute->rowCantSelectFun)) {
                                /**
                                 * @var SelectFuncReturn $selectReturnData
                                 */
                                $selectReturnData = ($tableSelectAttribute->rowCantSelectFun)($dItem, $index);
                                if($selectReturnData->canSelect !== true)
                                {
                                    $canSelect = false;
                                    $cantSelectMessage = $selectReturnData->cantSelectNotice;
                                }
                            }
                            ?>
                            <input class="<?=$tableSelectAttribute->checkBoxClass?> <?="checkAllItem_{$key}"?>" name="<?=$tableSelectAttribute->checkBoxName?>" onclick="tebleSelectItem(this, '<?=$key?>')" <?php if (!$canSelect):?> disabled title="<?= $cantSelectMessage ?>" <?endif;?> value="<?=$dItem[$tableSelectAttribute->dataKey]?>" type="checkbox">
                        </td>
                    <?php endif;?>
                    <!--多选逻辑 end -->
                    <?php foreach ($columns as $c) :?>
                        <?php
                        $filterBoxClass = md5($key.$c->title);
                        $currentClass = " {$filterBoxClass} ";
                        if (!empty($defaultShowColumns) && !in_array($c->title, $defaultShowColumns)) {
                            $currentClass .= " hidden";
                        }
                        ?>
                        <td class="<?= $c->class ?> <?= $currentClass ?> " <?= $c->attributeStr ?>>
                            <?php if ($c->type == Column::TYPE_TEXT):?>
                                <?php if (is_array($c->key)):?>
                                    <?php foreach ($c->key as $kItem) :?>
                                        <?= " {$dItem[$kItem]} " ?>
                                    <?php endforeach;?>
                                <?php else:?>
                                    <?=$dItem[$c->key]?>
                                <?php endif;?>
                            <?php elseif ($c->type == Column::TYPE_IMG):?>
                                <?= "<img style='max-height: 60px;max-width: 60px;' src='{$dItem[$c->key]}'/>" ?>
                            <?php elseif ($c->type ==  Column::TYPE_LINK):?>
                                <?= "<a href='{$dItem[$c->key]}' target='_blank'>{$dItem[$c->key]}</a>" ?>
                            <?php elseif ($c->type ==  Column::TYPE_INPUT):?>
                                <?= "<input style='width: 100%;height: 30px;border: 1px solid #efefef;padding: 2px;color: #666' value='{$dItem[$c->key]}'/>" ?>
                            <?php elseif ($c->type ==  Column::TYPE_TEXTAREA):?>
                                <?php $name = $c->attributes['textareaName'] ?? '';?>
                                <?= "<textarea name='{$name}' rows='5' style='width: 100%;resize: none;border: 1px solid #efefef;padding: 2px;color: #666'>{$dItem[$c->key]}</textarea>" ?>
                            <?php elseif ($c->type == Column::TYPE_FUNC):?>
                                <?php
                                $result = ($c->func)($dItem);
                                if (is_array($result))
                                {
                                    foreach ($result as $rItem)
                                    {
                                        if(empty($rItem->permission) || (in_array($rItem->permission, $permissionArr)))
                                        {
                                            echo $rItem->create();
                                        }
                                    }
                                }
                                else
                                {
                                    echo $result;
                                }
                                ?>
                            <?php endif;?>
                        </td>
                    <?php endforeach;?>
                </tr>
            <?php endforeach;?>
            </tbody>
        </table>
    </div>
<?php else:?>
    <div class="no-data">
        <?=$noData?>
    </div>
<?php endif;?>

<?php if (!empty($page)):?>
    <div class="page-box">
        <?= PageWidget::widget($page)?>
    </div>
<?php endif;?>
<script>

    // 按钮组开始
    var btnGrouptriggers = document.querySelectorAll('.public-table-btn-group-name');
    btnGrouptriggers.forEach(function(trigger) {
        trigger.addEventListener('click', function() {
            // 获取触发按钮的父元素（即容器）
            let parent = this.parentNode;
            // 遍历容器中的所有子元素
            for (let i = 0; i < parent.children.length; i++) {
                let child = parent.children[i];
                // 检查子元素是否具有指定的class（即.sibling）
                if (child.classList.contains('public-table-btn-group-content')) {
                    if (child.classList.contains('hidden'))
                    {
                        child.classList.remove('hidden');
                        parent.querySelector('.public-table-icon').style.transform = 'rotate(180deg)';
                    }
                    else
                    {
                        parent.querySelector('.public-table-icon').style.transform = 'rotate(0deg)';
                        child.classList.add('hidden');
                    }
                }
            }
        });
    });
    // 按钮组结束


</script>